<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <!-- <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th> -->
        <slot name="header"></slot>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="item in arr" :key="item.id">
        <slot name="body" :item="item"></slot>
        <!-- <td>{{ item.id }}</td>
        <td>{{ item.goods_name }}</td>
        <td>{{ item.goods_price }}</td>

        <td>
          <button
            :style="MyStyle"
            @click="$emit('AddTag', (item.inputVisible = true))"
            v-show="item.inputVisible === false"
          >
            +Tag
          </button>
          <input
            type="text"
            v-if="item.inputVisible"
            v-custom="[item.tags, item.inputValue]"
            @blur="item.inputVisible = false"
            v-model="item.inputValue"
            :style="{ width: '80px', height: '26px' }"
          />
          <br /> -->
        <!-- 标签input框 -->
        <!-- <span
            :style="mystyles"
            v-for="(items, index) in item.tags"
            :key="index"
          >
            <span
              :style="{ position: 'relative', cursor: 'default' }"
              @mouseenter="dis"
              @mouseleave="disr"
            >
              {{ items }}
              <i
                class="a"
                @click="Del(item.tags, index)"
                :style="{ cursor: 'pointer', display: 'none' }"
                ref="lis"
                >x</i
              >
            </span>
          </span>
        </td>
        <td><button calss="btn btn-danger btn-sm">删除</button></td> -->
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyTable',
  props: ['arr'],
  // data() {
  //   return {
  //     names: '',
  //     display: false,
  //     mystyles: {
  //       backgroundColor: '#fec107',
  //       margin: '5px',
  //       padding: '2px',
  //       height: '25px',
  //       display: 'inline-block',
  //       textAlign: 'center',
  //       border: '#ec4341',
  //       borderRadius: '10%',
  //     },
  //   }
  // },
  // methods: {
  //   Del(item, b) {
  //     item.splice(b, 1)
  //   },
  //   dis(e) {
  //     e.target.firstElementChild.style.display = 'block'
  //   },
  //   disr(e) {
  //     e.target.firstElementChild.style.display = 'none'
  //   },
  // },
}
</script>

<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
.a {
  position: absolute;
  font-size: 14px;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  line-height: 10px;
  text-align: center;
  background-color: red;
  color: rgb(255, 255, 255);
  top: -8px;
  right: -6px;
}
</style>
